<template>
  <div>provide - {{ count }} - <button @click="fn">count++</button></div>
  <Inject />
</template>

<script setup>
import Inject from "./inject.vue";
import { provide, ref } from "vue";

const count = ref(100);
const fn = () => {
  count.value++;
};

// provide有两个参数，表示的是要传的值的key和value
// provide("count", count.value);

// 如果希望有响应式，那么provide的第二个参数需要是对象
// 对象里面要写属性和改变属性的方法
// inject里面接受的值就变成这个对象了
provide("count", {
  count,
  fn,
});
</script>
